<nz-transfer-list class="ant-transfer-list" [ngStyle]="nzListStyle" data-direction="left"
  [titleText]="nzTitles[0]"
  [dataSource]="leftDataSource"
  [filter]="leftFilter"
  [filterOption]="nzFilterOption"
  (filterChange)="handleFilterChange($event)"
  [render]="nzRender"
  [showSearch]="nzShowSearch"
  [searchPlaceholder]="nzSearchPlaceholder || locale.searchPlaceholder"
  [notFoundContent]="nzNotFoundContent || locale.notFoundContent"
  [itemUnit]="nzItemUnit || locale.itemUnit"
  [itemsUnit]="nzItemsUnit || locale.itemsUnit"
  [footer]="nzFooter"
  (handleSelect)="handleLeftSelect($event)"
  (handleSelectAll)="handleLeftSelectAll($event)"></nz-transfer-list>
<div class="ant-transfer-operation">
  <button nz-button (click)="moveToLeft()" [disabled]="!leftActive" [nzType]="'primary'" [nzSize]="'small'">
    <i class="anticon anticon-left"></i><span *ngIf="nzOperations[1]">{{ nzOperations[1] }}</span>
  </button>
  <button nz-button (click)="moveToRight()" [disabled]="!rightActive" [nzType]="'primary'" [nzSize]="'small'">
    <i class="anticon anticon-right"></i><span *ngIf="nzOperations[0]">{{ nzOperations[0] }}</span>
  </button>
</div>
<nz-transfer-list class="ant-transfer-list" [ngStyle]="nzListStyle" data-direction="right"
  [titleText]="nzTitles[1]"
  [dataSource]="rightDataSource"
  [filter]="rightFilter"
  [filterOption]="nzFilterOption"
  (filterChange)="handleFilterChange($event)"
  [render]="nzRender"
  [showSearch]="nzShowSearch"
  [searchPlaceholder]="nzSearchPlaceholder || locale.searchPlaceholder"
  [notFoundContent]="nzNotFoundContent || locale.notFoundContent"
  [itemUnit]="nzItemUnit || locale.itemUnit"
  [itemsUnit]="nzItemsUnit || locale.itemsUnit"
  [footer]="nzFooter"
  (handleSelect)="handleRightSelect($event)"
  (handleSelectAll)="handleRightSelectAll($event)"></nz-transfer-list>